<template>
  <view class="pageContent">
    <view class="setSwi">
      <view class="houseMain">
        <view class="houseFace">人脸开门<text class="houseFaceSta" v-if="formData.faceSwitch==2" @click="goDoorList">查看审核结果</text></view>
        <view class="houseMsg" v-if="formData.faceSwitch==0">打开上传照片开关</view>
        <view class="houseMsg" v-if="formData.faceSwitch==1">上传照片校验中</view>
        <view class="houseMsg" v-if="formData.faceSwitch==2">请再上传照片</view>
        <view class="houseMsg" v-if="formData.faceSwitch==3">正在使用人脸识别开门</view>
      </view>
      <!-- 人脸同步状态0:未录入1:待审核2:审核失败3:审核通过 -->
      <view class="houseRight">
        <!-- <view >{{formData.faceSwitch}}</view> -->
        <view v-if="formData.faceSwitch==1" @click="imagePhoto">待审核</view>
        <view class="houseRightFail" v-if="formData.faceSwitch==2">审核失败</view>
        <!-- <view v-if="formData.faceSwitch==3">审核通过</view> -->
        <image class="switchImg" v-if="formData.faceSwitch!=1 && formData.faceSwitch!=3" :src="images +'/switchOff.png'" mode="widthFix"  @click="imagePhoto"/>
        <image class="switchImg" v-if="formData.faceSwitch==3" :src="images +'/switchOn.png'" mode="widthFix" @click="faceOff"/>
<!--        <switch class="switchTab" v-if="formData.faceSwitch!=1 && formData.faceSwitch!=1" color="#1086FF" :checked="formData.faceSta" @change="inputChange"
          id="faceSwitch" disable="true">
        </switch> -->
      </view>
    </view>
    <view class="setSwi" v-if="0">
      <view class="houseMain">
        <view class="houseFace">访客通知</view>
        <view class="houseMsg">关闭将接收不到远程通知</view>
      </view>
      <view class="houseRight">
        <image class="switchImg" v-if="formData.visitorNotifySwitch==0" :src="images +'/switchOff.png'" mode="widthFix" @click="notifySwi(1)"/>
        <image class="switchImg" v-if="formData.visitorNotifySwitch==1" :src="images +'/switchOn.png'" mode="widthFix" @click="notifySwi(0)"/>
<!--       <switch class="switchTab" color="#1086FF" :checked="formData.visitorNotifySwitch" @change="inputChangeNot"
          id="visitorNotifySwitch">
        </switch> -->
      </view>
    </view>
    <view class="setAbou" @click="AboutUs">
      <view class="houseFace">关于我们</view>
      <view class="rightArrow"></view>
    </view>

     <button class="btOne btBottom" @click="loginOut">退出登录</button>
  </view>
</template>

<script>
import { mapState } from 'vuex'
import config from '../../../../static/config.js'
import util from '../../../../static/utils/util.js'
export default {
  data () {
    return {
      images: config.images,
      localImages: config.localImages,
      formData: {
        visitorNotifySwitch:0,
        faceSta:0,
      },
      room:'',
      faceUrl:'',
    }
  },
  computed: {
    ...mapState({
      myInfo: state => state.user.myInfo
    })
  },
  onLoad() {
    var room = wx.getStorageSync('room');
    console.warn('room',room)
    this.room=room;

  },
  onShow(){
    util.socketTest();
    this.systemSetting();
  },
  methods: {
    loginOut(){
      wx.removeStorageSync('token');
      wx.removeStorageSync('phone');
      wx.removeStorageSync('openId');
      wx.removeStorageSync('room');
      wx.removeStorageSync('userMsg');
      wx.removeStorageSync('hasSub');
      // var userInfo=wx.getStorageSync('userInfo');
      // wx.clearStorageSync();
      // wx.setStorageSync('userInfo');

      wx.closeSocket()
      wx.onSocketClose(function(res) {
        console.warn('WebSocket 已关闭！')
      })

      wx.redirectTo({url:'/pages/bindLogin/main'})
    },
    inputChange(e) {
      var e=e.mp
      var value = e.detail.value
      console.warn('value',value)
    },
    inputChangeNot(e) {
      var e=e.mp
      var value = e.detail.value
      this.formData.visitorNotifySwitch=value
      this.notifySwitch();
    },
    notifySwi(index){
      this.notifySwitch(index);
    },
    addMem(){
      wx.navigateTo({url:'/pages/subMe/addMem/main'})
    },
    notifySwitch(index) {
      var self=this;
      var roomId =this.room.roomId;
      var notifySwitch =index;
      var params={
        notifySwitch:notifySwitch,
        roomId:roomId,
      }
      if(index==0){
        var paramUrl=util.stringifyQs(params)
        util.wxRequestPro('/UserServer/owner/info/notifySwitch?'+paramUrl,{},'PUT')
        .then((res)=>{
          console.warn('notifySwitch',res)
          this.systemSetting();
        })
      }
      if(index==1){
        var paramUrl=util.stringifyQs(params)
        util.wxRequestPro('/UserServer/owner/info/notifySwitch?'+paramUrl,{},'PUT')
        .then((res)=>{
          console.warn('notifySwitch',res)
          self.systemSetting();
        })
        this.onSub().then(()=>{
        })
      }
    },

    faceSwitch(params,type=0) {
      var self=this;
      var paramUrl=util.stringifyQs(params)
      util.wxRequestPro('/UserServer/owner/info/faceSwitch?'+paramUrl,{},'PUT')
      .then((res)=>{
        console.warn('faceSwitch',res)
        this.systemSetting().then(()=>{
          if(type==0){
            wx.showToast({
                title: "图片上传成功，请等待审核",
                icon: 'none'
            });
          }
          if(type==1){
            wx.showToast({
                title: "人脸识别关闭成功",
                icon: 'none'
            });
          }
        });

      })
    },
    systemSetting() {
      return new Promise((resolve,reject)=>{
        var params={
          // roomId:this.room.roomId,
          }
        // util.wxRequestPro('/UserServer/owner/info/systemSetting',params)
        util.wxRequestPro('/UserServer/mini/staff/systemSetting',params)
        .then((res)=>{
          console.warn('systemSetting',res)
          var param=res.param
          this.formData=param;
          //下面两种方式会出现faceSwitch值更新，界面ui不更新问题
          // this.formData.visitorNotifySwitch=param.visitorNotifySwitch
          // this.formData.faceSwitch=param.faceSwitch
          // Object.assign(this.formData,param)
          console.warn('this.formData',this.formData,this.formData.faceSwitch)
          //3:审核通过
          if(param.faceSwitch==3) {
           this.formData.faceSta=true
          }else {
           this.formData.faceSta=false
          }
        })
      })
    },
    //图片上传
    imagePhoto(){
      if(0) {
        this.formData.faceSwitch=3;
        return;
      }
      var self = this;
      var token = wx.getStorageSync('token');
      wx.chooseImage({
        count: 1,
        sizeType: ['original', 'compressed'],
        sourceType: ['album', 'camera'],
        success (res) {
          const tempFilePaths = res.tempFilePaths
          var src = res.tempFilePaths[0];
          self.formData.faceSta=false;
          util.uploadFile(src).then((res)=>{
            var param=res;
            self.faceUrl=param.filePath;
            var params={
              faceSwitch:1,
              faceUrl:self.faceUrl,
            }
            self.faceSwitch(params);
            self.onSubFace();
          })
        },
        fail(res){
          console.warn('fail',res)
          //重置勾选状态
          self.formData.faceSta=false;
        },
        complete(res){
          console.warn('complete',res)
        }
      })
    },
    //关闭人脸上传开关
    faceOff(){
      var params={
        faceSwitch:0,
        faceUrl:'',
      }
      this.faceSwitch(params,1);
    },
    //订阅消息
    onSub(){
      return new Promise((resolve,reject)=>{
        wx.requestSubscribeMessage({
          tmplIds: config.tmplIds,
          success (res) {
            console.warn('res',res)
            var value=Object.values(res);
            if(value[0]=='accept') {
              resolve()
              wx.setStorageSync('hasSub', 1);
            }else{
              resolve()
              // wx.showToast({
              //     title: "请在设置中打开通知管理开关",
              //     icon: 'none',
              //     duration: 2000,
              // });
              wx.setStorageSync('hasSub', 2);
            }
          },
          fail (res) {
            console.warn('fail=res',res)
            if(res.errCode==20004) {
              // 用户关闭了主开关，无法进行订阅
              wx.showToast({
                  title: "请在设置中打开通知管理开关",
                  icon: 'none',
                  duration: 2000,
              });
            }
            wx.setStorageSync('hasSub', 2);
          },
        })
      })
    },
    //订阅消息-人脸审核失败的
    onSubFace(){
      return new Promise((resolve,reject)=>{
        wx.requestSubscribeMessage({
          tmplIds: ['gvTQCeG0gx14Av9asdh_KdqULQ9WwRpTlkHYXB5OQM4'],
          success (res) {
            console.warn('res',res)
            var value=Object.values(res);
            resolve()
          },
          fail (res) {
            console.warn('fail=res',res)
            if(res.errCode==20004) {
              // 用户关闭了主开关，无法进行订阅
              wx.showToast({
                  title: "请在设置中打开通知管理开关",
                  icon: 'none',
                  duration: 2000,
              });
            }
          },
        })
      })
    },
    goDoorList(index){
      wx.navigateTo({url:'/pages/subMe/doorList/main'})
    },
    AboutUs() {
      wx.navigateTo({url:'/pages/subMe/AboutUs/main'})
    },
  }
}
</script>

<style lang="stylus" scoped>
.pageContent{
  // height 100vh
  padding: 50rpx 30rpx 0rpx 30rpx;
}
.setSwi{
  display flex
  justify-content space-between
  padding: 0rpx 0rpx 60rpx 0rpx;
  // border: 0.3rpx solid #E7E7E7
}

.houseRight{
  display flex
  align-items center
  // border: 1rpx solid #E7E7E7
}
.houseRightFail{
font-size: 30rpx;
color: #FF6E5D;
}
.switchImg {
  height: 72rpx;
  width: 72rpx;
  margin-left: 10rpx;
  // border: 0.3rpx solid #f00;

}
.switchTab {
  display: inline-block;
  /* scale修改switch大小，默认margin-right: -30rpx */
  transform: scale(0.66);
  margin-right: -30rpx;
  // border: 0.3rpx solid #f00;

}

.houseMain{
  margin: 0rpx 0rpx 0rpx 0rpx;
  // border: 0.3rpx solid #E7E7E7;
}
.houseFace{
  font-size: 32rpx;
  font-weight: 400;
  color: #333333;
  line-height: 42rpx;
  padding-bottom 6rpx;
}
.houseFaceSta{
  background: #FF6E5D;
  border-radius: 32rpx;
  font-size: 22rpx;
  color: #FFFFFF;
  padding: 2rpx 10rpx 2rpx 10rpx;
  margin: 0rpx 0rpx 0rpx 10rpx;
}
.houseMsg{
  font-size: 26rpx;
  font-weight: 400;
  color: #999999;
  line-height: 30rpx;
}
.setAbou{
  position relative
  padding: 20rpx 0rpx 20rpx 0rpx;
  // border: 0.3rpx solid #E7E7E7;
}
.rightArrow{
  height: 24rpx;
  width: 24rpx;
  top 25rpx
  right 10rpx
}
.houseTil
  display flex
  justify-content space-between
  padding: 14rpx 14rpx 14rpx 14rpx;
  line-height: 45rpx;
  font-size: 32rpx;
  color #030303
  border-bottom: 0.3rpx solid #E7E7E7;
.houseNo
  padding: 14rpx 14rpx 14rpx 14rpx;
  font-size: 32rpx;
  color #030303
  border-bottom: 0.3rpx solid #E7E7E7;
.houseMes{
  display flex
  padding: 14rpx 0rpx 14rpx 0rpx;
}
.houseMesIt{
  height: 40rpx;
  line-height: 40rpx;
  background: #F2F8FF;
  border-radius: 6rpx;
  border: 1px solid #BCDEFF;
  color: #519AEE;
  font-size: 28rpx;
  margin-right 10rpx;
  padding: 0rpx 14rpx 0rpx 14rpx;
}
.handler {
  display: flex;
  justify-content: flex-end;
  padding: 14rpx 14rpx 20rpx 14rpx;
  width: 100%;
  // border 1px solid aqua
}
.handlerCha{
  height: 60rpx;
  width 160rpx;
  line-height: 60rpx;
  background: #DDDDDD;
  border-radius: 30rpx;
  color: #FFFFFF;
  text-align center
  font-weight bold
  // padding: 0rpx 40rpx 0rpx 40rpx;
}
.handlerBlu{
  background: #1086FF;
  margin-left 18rpx
}
.btBottom{
  position fixed
  bottom 220rpx
  left 50%
  margin-left -300rpx
  width 600rpx
}
</style>
